<template>
  <div class="home_league">
    <header class="game_modal_header">全部赛事</header>
    <div class="schedule_content">
      <ul class="gl_clear">
        <li v-for="(item, index) in substationList" :key="index" class="game_item gl_fl">
          <div class="game_img_wrap gl_pointer" @click="jumpToSubstationHomePage(item)">
            <img class="game_img" :src="getStaticFileUrl(item.backgroundImage)">
          </div>
          <div class="game_info_wrap gl_clear">
            <div class="game_logo gl_fl gl_pointer" @click="jumpToSubstationHomePage(item)">
              <img class="game_logo_img" :src="getStaticFileUrl(item.logoImage)">
            </div>
            <div class="game_info">
              <div class="game_title gl_ellipsis gl_pointer">
                <span :title="(item.parent ? item.parent.name + '-' : '') + item.name" @click="jumpToSubstationHomePage(item)">
                  {{ item.parent ? item.parent.name + '-' : '' }}{{ item.name }}
                </span>
              </div>
              <div class="game_time">比赛时间：{{ item.startTime ? item.startTime.slice(0, 10) : '' }} 至 {{ item.endTime ? item.endTime.slice(0, 10) : '' }}</div>
              <div class="game_time">报名时间：{{ item.entryStartTime ? item.entryStartTime.slice(0, 10) : '' }} 至 {{ item.entryEndTime ? item.entryEndTime.slice(0, 10) : '' }}</div>
            </div>
            <div v-if="item.status.code !== 'EntryStarted'" class="entry_btn">{{ item.status.name }}</div>
            <div v-else class="entry_btn pointer enabled" @click="jumpToSubstationHomePage(item)">{{ item.status.name }}</div>
          </div>
        </li>
        <li v-if="!substationList.length && !pageLoading" class="gl_noData_mockTable">
          暂无分站赛数据，快去申办比赛吧！
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionChildren2 // 获取分站赛列表（不需要权限）
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementCompetitionChildren2QO // 获取分站赛列表（不需要权限）
} from '@/lib/form/game/swaggerForm';

export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: false,
      qo: new Api_GET_EventsManagementCompetitionChildren2QO(),
      substationList: []
    };
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    getPageList() {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      delete _qo.Page;
      delete _qo.SkipCount;
      delete _qo.MaxResultCount;
      _qo.ParentId = this.gameInfo.id;
      _qo.IsPublished = true;
      _qo.HasParent = true;
      // _qo.IsFinal = true;
      _qo.HasFinalQualification = true;
      _qo.IncludeStatus = true;
      // _qo.IncludeType = true;
      // _qo.IncludeApproveStatus = true;
      // _qo.IncludeLevel = true;
      // _qo.IncludeSetting = true;
      // _qo.IncludeReportSetting = true;
      // _qo.IncludeEntryFields = true;
      _qo.IncludeParent = true;
      delete _qo.IsFinal; // 不需要传isFinal, isfinal=true 则只查决赛;isfinal=false 则只查非决赛;不传查所有
      this.apiCompetitionChildren(_qo);
    },
    // 获取分站赛列表（不需要权限）
    apiCompetitionChildren(qo) {
      this.pageLoading = true;
      api_GET_EventsManagementCompetitionChildren2(qo)
        .then(
          res => {
            this.pageLoading = false;
            this.substationList = res.items;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            console.log(error);
          }
        );
    },
    jumpToSubstationHomePage (item) {
      const _origin = window.location.origin;
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = `${_origin}/game.html#/home/${item.route}/info`;
      a.target = '_blank';
      a.dispatchEvent(event);
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
  .schedule_content {
    min-height: 447px;
  }
  .game_item {
    width: 536px;
    height: 377px;
    margin-right: 10px;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.10);
  }
  .game_img_wrap {
    width: 100%;
    height: 287px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }
  .game_img {
    width: 100%;
    height: 100%;
  }

  .game_info_wrap {
    height: 90px;
    position: relative;
    background-image: url('../../../../assets/images/league/bg_substation.png');
  }
  .game_logo {
    width: 95px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .game_logo_img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .game_info {
    padding-left: 95px;
    height: 100%;
  }
  .game_title {
    padding-top: 16px;
    margin-bottom: 6px;
    line-height: 22px;
    font-size: 16px;
    font-weight: bold;
    color: #353434;
  }
  .game_time {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 17px;
    color: #353434;
  }
  .entry_btn {
    position: absolute;
    padding: 0 12px;
    line-height: 28px;
    background-color: #c8c8c8;
    color: #FFF;
    font-size: 14px;
    right: 20px;
    bottom: 10px;
    border-radius: 8px;
  }
  .entry_btn.enabled {
    background-color: #DC1D1D;
  }
  .pointer {
    cursor: pointer;
  }
</style>
